<template>
  <div class="Indexmain">
    <!-- <div class="leftBar">
      <div
        @drag.stop="drag"
        @dragend.stop="dragend('bar')"
        class="droppable-element"
        draggable="true"
        unselectable="on"
        @click="log"
      >
        <span>导航栏</span>
      </div>
    </div> -->

    <div id="content">
      <grid-layout
        ref="gridlayout"
        :layout.sync="layout"
        :col-num="12"
        :row-height="30"
        :is-draggable="true"
        :is-resizable="true"
        :vertical-compact="false"
        :use-css-transforms="true"
      >
        <grid-item
          ref="item"
          :key="item.i"
          v-for="item in layout"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          class="gridItem"
        >
          <div class="grid-content">
            <component :is="item.title">
              <span @click="deleteI" style="color: white">x</span>
            </component>
          </div>
        </grid-item>
      </grid-layout>
    </div>

    <!-- <div class="right">
      <div class="text">
        <p>宽度</p>
        <input
          type="text"
          v-model.number="layout[0].w"
          style="width: 80%; background-color: greenyellow; margin-left: 5px"
        />
      </div>
      <div class="text">
        <p>高度</p>
        <input
          type="text"
          v-model.number="layout[0].h"
          style="width: 80%; background-color: greenyellow; margin-left: 5px"
        />
      </div>
      <div class="text">
        <p>背景</p>
        <input
          type="text"
          v-model="listData.b"
          style="width: 80%; background-color: greenyellow; margin-left: 5px"
        />
      </div>
    </div> -->
  </div>
</template>

<script>
import { GridLayout, GridItem } from "vue-grid-layout";
import TextIndex from "../Layout/TextIndex.vue";
import Banner from "../Layout/Banner.vue";
import Newsbox from "../pages/Newsbox.vue";

let DragPos = { x: null, y: null, w: 1, h: 1, i: null };
export default {
  name: "LayoutView",
  props: {
    id: Number,
    required: true,
  },

  components: {
    GridLayout,
    GridItem,
    TextIndex,
    Banner,
    Newsbox,
  },

  data() {
    return {
      // { x: 0, y: 0, w: 12, h: 2, i: "0", title: "TextIndex" }
      layout: [
        { x: 0, y: 0, w: 12, h: 1.5, i: "0", title: "TextIndex" },
        { x: 0, y: 2, w: 8, h: 10, i: "1", title: "Banner" },
        { x: 8, y: 2, w: 4, h: 8, i: "2", title: "Newsbox" },
      ],
      title: "TextIndex",
      draggable: true,
      resizable: true,
      colNum: 12,
      index: 0,
      responsive: true,
      componentList: ["TextIndex", "Banner"],
      isShow: false,
      list: {
        w: "宽度",
        h: "高度",
        b: "背景",
      },
      listData: {
        w: 0,
        h: 0,
        b: 0,
      },

      mouse: true,
    };
  },
  computed: {},

  mounted() {
    this.$bus.$on("add", (data) => {
      this.layout.push(data);
    });

    this.$nextTick(() => {
      // this.listData.w = this.layout[0].w;
      // this.listData.h = this.layout[0].h;
      // this.listData.b = this.$refs.dom[0].$el.style.backgroundColor;
      // console.log(this.$refs.dom);
    });
  },

  watch: {
    listData: {
      handler(newValue) {
        this.$refs.dom[0].$el.style.backgroundColor = `${newValue.b}`;
      },
      deep: true,
    },
  },

  methods: {
    //拖拽时 如果在范围内标记就显示,如果不在范围内标记就消失
    drag: function (e) {
      let parentRect = document
        .getElementById("content")
        .getBoundingClientRect();
      let mouseInGrid = false;

      let mouseXY = e;
      //判断是不是在点击区域内
      if (
        mouseXY.x > parentRect.left &&
        mouseXY.x < parentRect.right &&
        mouseXY.y > parentRect.top &&
        mouseXY.y < parentRect.bottom
      ) {
        mouseInGrid = true;
      }

      if (
        mouseInGrid === true &&
        this.layout.findIndex((item) => item.i === "drop") === -1
      ) {
        // 打标记
        this.layout.push({
          x: (this.layout.length * 2) % (this.colNum || 12),
          y: this.layout.length + (this.colNum || 12), // puts it at the bottom
          w: 12,
          h: 2,
          i: "drop",
        });
      }
      //this.$refs.gridlayout.$children[this.layout.length].$refs.item选择标记的元素

      let index = this.layout.findIndex((item) => item.i === "drop");

      if (index !== -1) {
        try {
          this.$refs.gridlayout.$children[
            this.layout.length
          ].$refs.item.style.display = "none";
        } catch {}
        let el = this.$refs.gridlayout.$children[index];
        //更好的跟随鼠标
        el.dragging = {
          top: mouseXY.y - parentRect.top,
          left: mouseXY.x - parentRect.left,
        };
        let new_pos = el.calcXY(
          mouseXY.y - parentRect.top,
          mouseXY.x - parentRect.left
        );

        //如果在可拖拽范围内，则显示标记的位置
        if (mouseInGrid === true) {
          this.$refs.gridlayout.dragEvent(
            "dragstart",
            "drop",
            new_pos.x,
            new_pos.y,
            12,
            2
          );
          DragPos.i = String(index);
          DragPos.x = this.layout[index].x;
          DragPos.y = this.layout[index].y;
        }

        // 如果不在可拖拽的范围内，则取消标记所在的位置
        if (mouseInGrid === false) {
          this.$refs.gridlayout.dragEvent(
            "dragend",
            "drop",
            new_pos.x,
            new_pos.y,
            12,
            1
          );

          this.layout = this.layout.filter((obj) => obj.i !== "drop");
        }
      }
    },
    dragend: function (data) {
      // this.listData.w = this.layout[0].w;
      // this.listData.h = this.layout[0].h;
      //this.$refs.gridlayout.$children[this.layout.length].$refs.item选择标记的元素

      let parentRect = document
        .getElementById("content")
        .getBoundingClientRect();
      let mouseInGrid = false;
      console.log(data);
      let mouseXY = data.mouseXY;
      if (
        mouseXY.x > parentRect.left &&
        mouseXY.x < parentRect.right &&
        mouseXY.y > parentRect.top &&
        mouseXY.y < parentRect.bottom
      ) {
        mouseInGrid = true;
      }
      if (mouseInGrid === true) {
        this.$refs.gridlayout.dragEvent(
          "dragend",
          "drop",
          DragPos.x,
          DragPos.y,
          12,
          2
        );
        this.layout = this.layout.filter((obj) => obj.i !== "drop");
        // UNCOMMENT below if you want to add a grid-item

        if (data.title === "TextIndex") {
          this.layout.push({
            x: DragPos.x,
            y: DragPos.y,
            w: 12,
            h: 1.5,
            i: DragPos.i,
            title: data.title,
          });
        } else if (data.title === "Banner") {
          this.layout.push({
            x: DragPos.x,
            y: DragPos.y,
            w: 12,
            h: 10,
            i: DragPos.i,
            title: data.title,
          });
        } else if (data.title === "Newsbox") {
          this.layout.push({
            x: DragPos.x,
            y: DragPos.y,
            w: 4,
            h: 8,
            i: DragPos.i,
            title: data.title,
          });
        }

        this.$refs.gridlayout.dragEvent(
          "dragend",
          DragPos.i,
          DragPos.x,
          DragPos.y,
          1,
          1
        );
        try {
          this.$refs.gridlayout.$children[
            this.layout.length
          ].$refs.item.style.display = "block";
        } catch {}
      }
    },
    deleteI() {
      this.layout.pop();
    },
  },
};
</script>

<style scoped>
.leftBar {
  width: 150px;
  height: 100vh;
}
.droppable-element {
  height: 30px;
  width: 100%;
  text-align: center;
  background: #fdd;
  border: 1px solid pink;
  margin-top: 10px;
}
.Indexmain {
  width: 100%;
  height: 100vh;
  border: 1px solid pink;
  overflow: auto;
  justify-content: space-between;
  /* align-items: center; */
  display: flex;
}
.gridItem {
}
.gridLayout {
  background-color: pink;
}
#content {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.right {
  width: 9%;
  height: 100vh;
  background-color: #fdd;
}
.text {
  width: 100%;
  height: 20%;
  border: 1px solid peru;
}

.swiper-container {
  width: 100%;
  height: 100%;
  border: 1px solid black;
}
.swiper-slide {
  width: 100%;
  text-align: center;
  font-size: 18px;
  background: #fff;
  padding: 10px;
  border: 1px solid red;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.grid-content {
  width: 100%;
  height: 100%;
}
</style>